<template lang="html">
  <div class="" id="">
    <ul class="releaseForm">
      <li>
        <span>当前密码</span>
        <div class="rightForm">
          <input type="text" readonly v-model="lockJson.oldPassword" placeholder="请输入旧密码">
        </div>
      </li>
      <li>
        <span>手机号码</span>
        <div class="rightForm">
          <input type="text" name="" v-model="mobile" placeholder="请输入手机号码">
        </div>
      </li>
      <li>
        <span>验证码</span>
        <div class="rightForm">
          <input type="text" name="" v-model="lockJson.yzmCode" placeholder="请输入验证码">
          <button type="button" name="button" class="btn" v-if="isGetYzmTime">发送({{yzmTime}}s)</button>
          <button type="button" name="button" class="inlineBtn" v-else @click="getYzm">获取验证码</button>
        </div>
      </li>
      <li>
        <span>新的密码</span>
        <div class="rightForm">
          <input type="password" name="" v-model="checkPassword" maxlength="6" placeholder="请设置6位数字密码">
        </div>
      </li>
      <li>
        <span>确认密码</span>
        <div class="rightForm">
          <input type="password" name="" v-model="lockJson.password" maxlength="6" v-on:input="checkNewpass" placeholder="再次填写你的密码">
        </div>
      </li>
    </ul>
    <div class="fixedBottom">
      <button type="button" name="button" class="blockBtn" @click="submitModify">确认</button>
    </div>
  </div>
</template>

<script>
import { Toast,MessageBox  } from 'mint-ui';
import {mapMutations,mapState} from 'Vuex';
import {mobileTest,reLoginWX,trim} from '@/util/util.js';
export default {
  name:'modifyLock',
  data:()=>({
    lockInfo:'',
    text:'',
    yzmTime:60,
    isGetYzmTime:false,   //倒计时内不能重复点击获取验证码
    mobile:'',
    checkPassword:'',     //确认新密码
    lockJson:{
      passwordId:'',      //智能锁密码ID
      yzmCode:'',         //验证码
      oldPassword:'',     //智能锁旧密码
      password:'',        //智能锁新密码——确认后的新密码
    }
  }),
  methods: {
    // 修改提交
    submitModify() {
      let self = this;
      let lockParam = self.lockJson;
      console.log(lockParam);
      network.post(configUrl.UPDATEUSERLOCK_URL,lockParam,function (res) {
        console.log(res);
        Toast('智能锁密码修改成功');
        self.$router.go(-1);
      },function (msg) {
        console.log(msg);
      })
    },
    // 确认新密码
    checkNewpass() {
      // console.log(this.checkPassword);
      let password = this.checkPassword;    //输入的新密码
      if (this.lockJson.password.length==6) {

        if (this.lockJson.password === password) {
          console.log('正确');
        }else {
          console.log('错误');
          Toast('两次密码不一样');
          this.lockJson.password = '';
        }
      }else {
        // console.log('输入个数不是6');
      }
    },
    // 获取验证码
    getYzm() {
      let that = this;
      let mobile = that.mobile;
      console.log(mobile);
      let yzmParam = {
        mobile:trim(mobile),
        pinType:5     //验证码类型 1 注册登录 2在线委托 3合同签约 4手机号换绑 5修改智能门锁密码 6预约看房
      };

      network.get(configUrl.LOGINGETYZM_URL,yzmParam,function(res){
        console.log(res);
        Toast('验证码发送成功');
        that.yzmTime = 60;
        that.isGetYzmTime = true;

        let yzmInterval = setInterval(()=>{
          that.yzmTime --;
          if(that.yzmTime==0){
            that.isGetYzmTime = false;
            return false;
          }
        },1000);
      },function(err){
        console.log(err);
      });
    },
  },
  mounted() {
    let lockInfo = this.$route.query.lockInfo;
    console.log(lockInfo);
    this.lockInfo = lockInfo;
    this.lockJson.passwordId = lockInfo.passwordId;    //智能锁密码ID
    this.lockJson.oldPassword = lockInfo.password;       //旧密码
    let userInfo_storage = JSON.parse(window.localStorage.getItem('userInfo'));
    this.mobile = this.userInfo.mobile? this.userInfo.mobile : userInfo_storage.mobile;
  },
  computed: {
    ...mapState({
      userInfo:state=>state.login.userInfo,
    })
  },
}
</script>

<style lang="scss" scoped>
.releaseForm{
  font-size: 1rem;
  margin-bottom: 10px;
  background: white;
  li{
    @include flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid $borderColor;
    .rightForm{
      // width: 60%;
      @include flexcell;
      text-align: right;
      @include flex;
      justify-content: flex-end;
      input{
        text-align: right;
        border:none;
        font-size: 1rem;
      }
    }
    .inlineBtn{
      height: 1.6rem;
      border-radius: 20px;
    }
    .addOthers{
      width: 100%;
      @include flex;
      justify-content: space-between;
      font-size: 0.9rem;
      border-bottom: 1px solid #ddd;
      &:last-child{
        border: none;
      }
      input{
        text-align: right;
        border: none;
        line-height: 2.3rem;
      }
    }
    .desTextarea{
      width: 96%;
      background: $eeeColor;
      border: none;
      outline: none;
      border-radius: 4px;
      padding: 10px 2%;
      margin-top: 10px;
    }
  }
}
</style>
